<template>
  <transition mode="out-in"
    name="slideout"
    :enter-active-class="'slide-active'"
    :leave-active-class="'slide-active'">
    <div class="container" v-on:click.self="closecheck()">
      <div class="pro-check">
        <div class="pro-check-box" v-if="goodsInfo">
          <div class="close-pro-check norem flex-box" v-on:click="closecheck()">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gb-untitled94"></use>
            </svg>
          </div>
          <div class="pro-img-box">
            <div class="pro-img">
              <img :src="$BASEPATH + goodsInfo.img">
            </div>
            <div class="pro-text flex-box">
              <div>
                <h4><span>￥</span>{{goodsInfo.price?goodsInfo.price:'????'}}</h4>
                <p>{{goodsInfo.describe}}</p>
              </div>
            </div>
          </div>
          <div class="pro-title-box" v-if="productSpecs">
            <h3>{{productSpecs.name}}</h3>
            <div class="pro-lists">
              <button 
                :class="{active: item.accessPath?item.accessPath.split('/')[1]==goodsInfo.allbusinessId:false}" 
                :disabled="item.isDisable=='1'"
                v-for="(item,index) in productSpecs.attributes" 
                :key="index"
                @click="selectCur(item.accessPath)"
                >{{item.name}}</button>
            </div>
            <div class="pro-line"></div>
          </div>
          <div class="pro-title-box" v-else>
            <h3>已选</h3>
            <div class="pro-lists">
              <ul>
                <li class="active"><p>{{goodsInfo.name}}</p></li>
              </ul>
            </div>
            <div class="pro-line"></div>
          </div>
          <div class="pro-num-box flex-box">
            <h5>购买数量</h5>
            <div class="pro-num">
              <button class="left flex-box" :disabled="goodsInfo.amountFlag!=='1'" :class="{active:proNumber<=0}" @click="proMinus"><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gb-jian"></use>
              </svg></button>
              <div class="center flex-box">{{proNumber}}</div>
              <button class="right flex-box" :disabled="goodsInfo.amountFlag!=='1'" @click="proAdd"><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gb-jia"></use>
              </svg></button>
            </div>
          </div>
          <div v-if="btnAddCart" class="addCart" v-on:click="addToCart()">
            <button v-if="carBtnState!==0" :disabled="carBtnState===1">添加到购物车</button>
          </div>
          <div v-if="btnBuyNow" class="addCart" v-on:click="commitNow()">
            <button :disabled="!buyBtnState">确认</button>
          </div>
        </div>
        <div class="pro-detail-box" v-if="proMSG">
          <div class="pro-detail-title">
            <h4>产品信息</h4>
          </div>
          <div class="pro-detail-list">
            <ul>
              <li v-for="(item,index) in proMSG" :key="index"><p class="title">{{item.name}} :</p><p class="content" v-html="item.val"></p></li>
              <!-- <li><p class="title">净含量 :</p><p class="content">150ml</p></li>
              <li><p class="title">供应商 :</p><p class="content">华大农业-精准营养生活汇</p></li> -->
            </ul>
          </div>
          <div class="confirm" v-on:click="closecheck()">
            <p>确认</p>
          </div>
        </div>
        <div class="pro-cuxiao" v-if="proChuXiao">
          <input type="text" placeholder="请输入促销码">
          <div class="cut-line"></div>
          <div class="confirm" v-on:click="closecheck()">
            确认
          </div>
        </div>
        <div class="pro-quan" v-if="proQuan">
          <input type="text" placeholder="请输入优惠码">
          <div class="cut-line"></div>
          <div class="confirm" v-on:click="closecheck()">
            确认
          </div>
        </div>
        <div class="pro-jifen" v-if="proJiFen">
          <input type="text" placeholder="请输入要使用的积分">
          <div class="cut-line"></div>
          <div class="confirm" v-on:click="closecheck()">
            确认
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapGetters, mapActions, mapState } from 'vuex'
import '@/assets/css/gb-index.scss'
import '@/assets/js/app/iconfont-gb'
// @ is an alias to /src
export default {
  name: 'mallIndex',
  data() {
    return {
      lists: '',
      proNumber: 1
    }
  },
  components: {},
  props: [
    'goodsInfo',
    'carBtnState',
    'buyBtnState',
    'proMSG',
    'btnAddCart',
    'productSpecs',
    'btnBuyNow',
    'proChuXiao',
    'proQuan',
    'proJiFen'
  ],
  computed: {
    ...mapState({
      proLists: state => state.cart.cart
      // selectedLists: state => state.cart.cartSelected
    }),
    ...mapGetters({
      hasGoods: 'cart/hasGoods'
    })
  },
  methods: {
    ...mapActions({
      createGoodsToCart: 'cart/create_goods_to_cart',
      addGoodsFromCart: 'cart/add_goods_from_cart'
    }),
    closecheck() {
      this.$bus.$emit('closeProMsg', false)
    },
    selectPro() {
      this.$bus.$emit('selectProAc', false)
    },
    selectCur(path) {
      this.$bus.$emit('selectCurGoods', path)
    },
    proAdd() {
      this.proNumber++
    },
    proMinus() {
      if (this.proNumber > 1) {
        this.proNumber--
      } else {
        this.proNumber = 1
      }
    },
    addToCart() {
      // this.goodsInfo.num = this.proNumber
      // console.log(this.goodsInfo)
      let hasGoods = this.hasGoods(this.goodsInfo)
      if (hasGoods && this.goodsInfo.amountFlag !== '1') {
        this.$layer.msg('本商品已在购物车中')
      } else {
        let params = {
          allbusinessId: this.goodsInfo.allbusinessId,
          amount: this.proNumber
        }
        // console.log(params)
        this.$API
          .addToCart(params)
          .then(data => {
            console.log(data)
            if (data.flag) {
              this.$API.getCart()
            } else {
              this.$layer.msg(data.msg)
            }
          })
          .catch(err => {
            alert(err)
          })
        // let hasGoods = this.hasGoods(this.goodsInfo)
        // if (hasGoods) {
        //   //有，该商品的数量+1
        //   let has = this.proLists[`p${this.goodsInfo.id}`].amount
        //   this.goodsInfo.amount = has + this.proNumber
        //   this.createGoodsToCart(this.goodsInfo)
        // } else {
        //   //没有，购物车创建该商品
        //   this.goodsInfo.amount = this.proNumber
        //   this.createGoodsToCart(this.goodsInfo)
        // }
        this.closecheck()
      }
    },
    commitNow() {
      this.goodsInfo.amount = this.proNumber
      console.log(this.goodsInfo)
      this.closecheck()
      this.$router.push({
        path: '/payment',
        query: { goodsInfo: JSON.stringify(this.goodsInfo) }
      })
      // this.$router.push('/paymentDirect')
    }
  },
  mounted() {
    // console.log(this.proCheck)
  }
}
</script>
<style scoped lang="scss">
.container {
  width: 100%;
  height: 1500px;
  position: fixed;
  background: rgba($color: #000000, $alpha: 0.6);
  z-index: 9999;
  left: 0;
  bottom: 0;
  .pro-check {
    width: 100%;
    height: 78vh;
    z-index: 99999;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: 0 -4px 10px rgba($color: #000000, $alpha: 0.2);
    .norem {
      width: 56px;
      height: 56px;
      border: 1px solid #666;
      border-radius: 28px;
      font-size: 24px;
      position: absolute;
      right: 12px;
      top: 12px;
      z-index: 9999;
      transform: scale(0.5);
      transform-origin: top right;
    }
    .pro-check-box {
      width: 100%;
      .pro-img-box {
        width: 100%;
        height: 100px;
        padding: 0 15px;
        float: left;
        position: relative;
        box-sizing: border-box;
        &::after {
          width: 100%;
          border-bottom: 1px solid #ccc;
          position: relative;
          display: block;
          content: '';
          left: 0;
          bottom: 0;
          transform: scaleY(0.5);
          transform-origin: bottom;
        }
        .pro-img {
          width: 216px;
          height: 216px;
          position: absolute;
          left: 15px;
          top: -15px;
          overflow: hidden;
          border: 1px solid #ccc;
          border-radius: 5px;
          background: #fff;
          transform: scale(0.5);
          transform-origin: top left;
          img {
            border-radius: 5px;
            width: 100%;
          }
        }
        .pro-text {
          width: 100%;
          height: 100%;
          padding-left: 120px;
          text-align: left;
          box-sizing: border-box;
          flex-wrap: wrap;
          justify-content: flex-start;
          h4 {
            width: 100%;
            font-size: 28px;
            color: #ff7302;
            line-height: 32px;
            margin-bottom: 4px;
            span {
              font-size: 16px;
              position: relative;
              top: 0;
            }
          }
        }
      }
      .pro-title-box {
        width: 100%;
        float: left;
        padding: 18px 15px;
        box-sizing: border-box;
        text-align: left;
        position: relative;
        float: left;
        h3 {
          width: 100%;
          font-size: 16px;
          line-height: 18px;
          margin-bottom: 8px;
        }
        .pro-lists {
          width: 100%;
          float: left;
          ul {
            li {
              float: left;
              display: block;
              padding: 8px 16px;
              border-radius: 3px;
              margin-right: 6px;
              color: #999;
              font-size: 12px;
              margin-top: 6px;
              border: 1px solid #999;
              &.active {
                color: #ff4242;
                border: 1px solid #ff4242;
              }
            }
          }
          button {
            float: left;
            display: block;
            font-size: 14px;
            padding: 6px 16px;
            border-radius: 3px;
            margin-right: 6px;
            color: #999;
            background: none;
            margin-top: 6px;
            border: 1px solid #999;
            &.active {
              color: #ff4242;
              border: 1px solid #ff4242;
            }
            &:disabled {
              border: 1px solid #ccc;
              background: #eee;
            }
          }
        }
        .pro-line {
          width: 100%;
          position: absolute;
          left: 0;
          bottom: 0;
          padding: 0 15px;
          box-sizing: border-box;
          height: 1px;
          &::after {
            width: 100%;
            border-bottom: 1px solid #ccc;
            position: relative;
            display: block;
            content: '';
            left: 0;
            bottom: 0;
            transform: scaleY(0.5);
            transform-origin: bottom;
          }
        }
      }
      .pro-num-box {
        width: 100%;
        float: left;
        box-sizing: border-box;
        font-size: 16px;
        padding: 15px 15px;
        justify-content: space-between;
        .pro-num {
          width: 96px;
          height: 32px;
          border-radius: 3px;
          border: 1px solid #ddd;
          button {
            border: none;
            outline: none;
            background: none;
            &:disabled {
              color: #ccc;
            }
          }
          & > div,
          button {
            float: left;
            width: 32px;
            height: 100%;
            line-height: 24px;
            box-sizing: border-box;
            font-size: 16px;
            color: #666;
            &.active {
              color: #aaa;
            }
            &.left {
              border-right: 1px solid #ddd;
            }
            &.center {
              font-size: 18px;
            }
            &.right {
              border-left: 1px solid #ddd;
            }
          }
        }
      }
      .addCart {
        width: 100%;
        height: 42px;
        line-height: 42px;
        font-size: 16px;
        background: #ff4242;
        color: #fff;
        position: absolute;
        left: 0;
        bottom: 0;
        button {
          background: #ff4242;
          color: #fff;
          width: 100%;
          font-size: 16px;
          height: 42px;
          border: none;
          &:disabled {
            background: #999;
          }
        }
      }
    }
    .pro-detail-box {
      width: 100%;
      padding: 2px 15px;
      box-sizing: border-box;
      text-align: left;
      h4 {
        text-align: center;
        font-size: 16px;
        color: #000;
        font-weight: bold;
        line-height: 42px;
        position: relative;
        &::after {
          display: block;
          position: absolute;
          width: 100%;
          border-bottom: 1px solid #ccc;
          transform: scaleY(0.5);
          transform-origin: bottom;
          left: 0;
          bottom: 0;
          content: '';
        }
      }
      .pro-detail-list {
        width: 100%;
        padding: 20px 0;
        ul li {
          width: 100%;
          float: left;
          font-size: 14px;
          margin-bottom: 12px;
          color: #999;
          .title {
            color: #333;
            width: 80px;
            float: left;
          }
        }
      }
    }
    .confirm {
      width: 100%;
      height: 42px;
      line-height: 42px;
      font-size: 16px;
      background: #ff4242;
      color: #fff;
      text-align: center;
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .pro-cuxiao,
    .pro-quan,
    .pro-jifen {
      padding: 24px 15px 0 15px;
      box-sizing: border-box;
      .cut-line {
        width: 100%;
        position: absolute;
        top: 88px;
        left: 0;
        height: 1px;
        background: #aaa;
        transform: scaleY(0.2);
      }
      input {
        width: 100%;
        height: 40px;
        border-radius: 40px;
        background: none;
        box-sizing: border-box;
        padding: 0 15px;
        border: 1px solid #ccc;
      }
      p {
        text-align: left;
        font-size: 14px;
        margin-top: 38px;
        color: #999;
      }
    }
  }
}
.slide-active {
  transition: 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition-property: opacity, transform;
}
.slideout-enter,
.slideout-leave-to {
  opacity: 0;
  transform: translate3d(0, 60px, 0);
}
</style>
